<div>
  <h2>基础用法</h2>
  <el-tabs value="value">
    <el-tab-pane label="首页" name="first" closable="true">
      <h3>欢迎来到首页</h3>
      <p>这里是首页内容...</p>
    </el-tab-pane>

    <el-tab-pane label="消息中心" name="second" closable="true">
      <h3>消息列表</h3>
      <p>您有3条未读消息</p>
    </el-tab-pane>

    <el-tab-pane label="个人中心" name="third" disabled="true">
      <h3>个人信息</h3>
      <p>该页面暂不可用</p>
    </el-tab-pane>
  </el-tabs>
  <h2>选项卡样式</h2>
  <el-tabs value="value" type="card">
    <el-tab-pane label="首页" name="first">
      <h3>欢迎来到首页</h3>
      <p>这里是首页内容...</p>
    </el-tab-pane>

    <el-tab-pane label="消息中心" name="second" closable="true">
      <h3>消息列表</h3>
      <p>您有3条未读消息</p>
    </el-tab-pane>

    <el-tab-pane label="个人中心" name="third" disabled="true">
      <h3>个人信息</h3>
      <p>该页面暂不可用</p>
    </el-tab-pane>
  </el-tabs>
  <h2>卡片化</h2>
  <el-tabs value="value" type="border-card">
    <el-tab-pane label="首页" name="first">
      <h3>欢迎来到首页</h3>
      <p>这里是首页内容...</p>
    </el-tab-pane>

    <el-tab-pane label="消息中心" name="second" closable="true">
      <h3>消息列表</h3>
      <p>您有3条未读消息</p>
    </el-tab-pane>

    <el-tab-pane label="个人中心" name="third" disabled="true">
      <h3>个人信息</h3>
      <p>该页面暂不可用</p>
    </el-tab-pane>
  </el-tabs>
</div>